Adaptivity and Layout

hr.icon

お気に入りのアプリケーションは、どのデバイスでも、どのような状況でも使用できることが望まれます。

この期待に応えるためには、iPadでのマルチタスク、分割表示、画面の回転など、デバイスごとにUI要素やレイアウトが自動的に形や大きさを変えるように設定し、適応性のあるインターフェイスを設計します。

Device Screen Sizes and Orientations

iOSデバイスにはさまざまな画面サイズがあり、人々は縦向きでも横向きでも使うことができます。

iPhone XやiPad Proのようなエッジツーエッジのデバイスでは、ディスプレイの角が丸くなっており、デバイスの全体的なサイズと密接に一致しています。

一方、iPhone SEやiPad Airなどのデバイスでは、ディスプレイが長方形になっています。

アプリケーションが特定のデバイスで動作する場合は、そのデバイスのすべてのスクリーンサイズで動作することを確認してください。

つまり、iPhone専用アプリはiPhoneのすべての画面サイズで動作し、iPad専用アプリはiPadのすべての画面サイズで動作する必要があります。

https://gyazo.com/a3dae0fae0f8fc85bd5b4b7d2f61291a

table: Device - Dimensions (portrait)

Device Dimensions (portrait)

12.9" iPad Pro 1024x1366 pt (2048x2732 px @2x)

11" iPad Pro 834x1194 pt (1668x2388 px @2x)

10.5" iPad Pro 834x1194 pt (1668x2388 px @2x)

9.7" iPad Pro 768x1024 pt (1536x2048 px @2x)

7.9" iPad mini 768x1024 pt (1536x2048 px @2x)

10.5" iPad Air 834x1112 pt (1668x2224 px @2x)

9.7" iPad Air 768x1024 pt (1536x2048 px @2x)

10.2" iPad 810x1080 pt (1620x2160 px @2x)

9.7" iPad 768x1024 pt (1536x2048 px @2x)

iPhone 13 Pro Max 428x926 pt (1284x2778 px @3x)

iPhone 13 Pro 390x844 pt (1170x2532 px @3x)

iPhone 13 390x844 pt (1170x2532 px @3x)

iPhone 13 mini 375x812 pt (1125x2436 px @3x)

iPhone 12 Pro Max 428x926 pt (1284x2778 px @3x)

iPhone 12 Pro 390x844 pt (1170x2532 px @3x)

iPhone 12 390x844 pt (1170x2532 px @3x)

iPhone 12 mini 375x812 pt (1125x2436 px @3x)

iPhone 11 Pro Max 414x896 pt (1242x2688 px @3x)

iPhone 11 Pro 375x812 pt (1125x2436 px @3x)

iPhone 11 414x896 pt (828x1792 px @2x)

iPhone XS Max 414x896 pt (1242x2688 px @3x)

iPhone XS 375x812 pt (1125x2436 px @3x)

iPhone XR 414x896 pt (828x1792 px @2x)

iPhone X 375x812 pt (1125x2436 px @3x)

iPhone 8 Plus 414x736 pt (1080x1920 px @3x)

iPhone 8 375x667 pt (750x1334 px @2x)

iPhone 7 Plus 414x736 pt (1080x1920 px @3x)

iPhone 7 375x667 pt (750x1334 px @2x)

iPhone 6s Plus 414x736 pt (1080x1920 px @3x)

iPhone 6s 375x667 pt (750x1334 px @2x)

iPhone 6 Plus 414x736 pt (1080x1920 px @3x)

iPhone 6 375x667 pt (750x1334 px @2x)

4.7" iPhone SE 375x667 pt (750x1334 px @2x)

4" iPhone SE 320x568 pt (640x1136 px @2x)

iPod touch 5th generation and later 320x568 pt (640x1136 px @2x)

注意

上の表にあるすべてのスケールファクターはUIKitのスケールファクターであり、ネイティブのスケールファクターとは異なる場合があります。

Auto Layout

Auto Layout は、適応性のあるインターフェイスを構築するための開発ツールです。

Auto Layout を使用すると、アプリ内のコンテンツを管理するルール（制約）を定義できます。

例えば、画面の大きさに関わらず、ボタンを常に水平方向の中央に配置し、画像の8ポイント下に配置するように制約することができます。

https://gyazo.com/a50f83815eba893beb33d8e99793f3d6

Auto Layoutは、形質と呼ばれる特定の環境の変化に対して指定した制約条件に従って、レイアウトを自動的に再調整します。

以下のようなさまざまな特性に、アプリが動的に適応するように設定できます。

デバイスの画面サイズ、解像度、色域（sRGB/P3）の違い

デバイスの向きの違い（ポートレート／ランドスケープ）

iPadのマルチタスキングモード

ダイナミックタイプによる文字サイズの変更

ロケールに応じて有効になる国際化機能（左から右/右から左へのレイアウト方向、日付/時刻/数字のフォーマット、フォントのバリエーション、テキストの長さ）

Layout Guides and Safe Areas

レイアウトガイドは、画面上でのコンテンツの位置、配置、スペースを確保するための長方形の領域を定義します。

システムには定義済みのレイアウトガイドがあり、コンテンツの周囲に標準的な余白を適用したり、読みやすさを考慮してテキストの幅を制限したりすることが簡単にできます。

また、独自のレイアウトガイドを定義することもできます。

セーフエリアとは、ビューコントローラが提供するナビゲーションバー、タブバー、ツールバーなどのビューで覆われていない、ビュー内の領域のことです。

iOS 15以降では、キーボードレイアウトガイドが定義されています。

これは、キーボードが現在占めるスペースを表し、セーフエリアの挿入を考慮したものです。

このガイドを使用すると、ユーザーが使用するキーボードの種類や配置にかかわらず、キーボードをアプリの一部のように感じさせることができます。

https://gyazo.com/deddba2aa2158b9e31d094965652154f

https://gyazo.com/5a6347c77dc32f3dfc005c63de12b702

システムで定義された安全領域とレイアウトマージンを守ってください。

これらのレイアウトガイドは、デバイスやコンテキストに応じて適切なインセットを確保します。

また、セーフエリアは、コンテンツがステータスバー、ナビゲーションバー、ツールバー、タブバーに重ならないようにします。

標準的なシステムで提供されるビューには、セーフエリアのレイアウトガイドが自動的に適用されます。

Size Classes

サイズクラスとは、コンテンツエリアのサイズに応じて自動的に割り当てられる特徴のことです。

システムでは、ビューの高さと幅を表すレギュラー（広いスペースを表す）とコンパクト（狭いスペースを表す）の2つのサイズクラスが定義されています。

1つのビューは、サイズクラスの任意の組み合わせを持つことができます。

レギュラー幅、レギュラー高さ

コンパクト幅、コンパクト高さ

レギュラー幅、コンパクト高さ

コンパクト幅、レギュラー高さ

他の環境の変化と同様に、iOSはコンテンツエリアのサイズクラスに基づいて動的にレイアウトを調整します。

例えば、縦方向のサイズクラスがコンパクト高さからレギュラー高さに変更された場合（デバイスが横向きから縦向きに回転した場合など）、タブバーの高さが高くなることがあります。

Device Size Classes

フルスクリーン表示に適用されるサイズクラスの組み合わせは、画面サイズによってデバイスごとに異なります。

https://gyazo.com/e2b691ceadca94ad361655368359a5fb

table:Device - Portrait orientation - Landscape orientation

Device Portrait orientation Landscape orientation

12.9" iPad Pro Regular width, regular height Regular width, regular height

11" iPad Pro Regular width, regular height Regular width, regular height

10.5" iPad Pro Regular width, regular height Regular width, regular height

9.7" iPad Regular width, regular height Regular width, regular height

7.9" iPad mini Regular width, regular height Regular width, regular height

iPhone 12 Pro Max Compact width, regular height Regular width, compact height

iPhone 12 Pro Compact width, regular height Compact width, compact height

iPhone 12 Compact width, regular height Compact width, compact height

iPhone 12 mini Compact width, regular height Compact width, compact height

iPhone 11 Pro Max Compact width, regular height Regular width, compact height

iPhone 11 Pro Compact width, regular height Compact width, compact height

iPhone 11 Compact width, regular height Regular width, compact height

iPhone XS Max Compact width, regular height Regular width, compact height

iPhone XS Compact width, regular height Compact width, compact height

iPhone XR Compact width, regular height Regular width, compact height

iPhone X Compact width, regular height Compact width, compact height

iPhone 8 Plus Compact width, regular height Regular width, compact height

iPhone 8 Compact width, regular height Compact width, compact height

iPhone 7 Plus Compact width, regular height Regular width, compact height

iPhone 7 Compact width, regular height Compact width, compact height

iPhone 6s Plus Compact width, regular height Regular width, compact height

iPhone 6s Compact width, regular height Compact width, compact height

iPhone SE Compact width, regular height Compact width, compact height

iPod touch 5th generation and later Compact width, regular height Compact width, compact height

Multitasking Size Classes

iPadでは、アプリがマルチタスク構成で動作する場合にもサイズクラスが適用されます。

https://gyazo.com/18c9318c45b425e63d1d4632a09a8ab4

https://gyazo.com/53c06ecaa3773af361b5b74ea06e27f0

https://gyazo.com/e711c4ef74ff13acd50790114ed451b2

table: Device - Mode - Portrait orientation - Landscape orientation

Device Mode Portrait orientation Landscape orientation

12.9" iPad Pro 2/3 split view Compact width, regular height Regular width, regular height

1/2 split view N/A Regular width, regular height

1/3 split view Compact width, regular height Compact width, regular height

11" iPad Pro 2/3 split view Compact width, regular height Regular width, regular height

1/2 split view N/A Compact width, regular height

1/3 split view Compact width, regular height Compact width, regular height

10.5" iPad Pro 2/3 split view Compact width, regular height Regular width, regular height

1/2 split view N/A Compact width, regular height

1/3 split view Compact width, regular height Compact width, regular height

9.7" iPad 2/3 split view Compact width, regular height Regular width, regular height

1/2 split view N/A Compact width, regular height

1/3 split view Compact width, regular height Compact width, regular height

7.9" iPad mini 4 2/3 split view Compact width, regular height Regular width, regular height

1/2 split view N/A Compact width, regular height

1/3 split view Compact width, regular height Compact width, regular height

General Layout Considerations

主要なコンテンツがデフォルトのサイズで明確に表示されるようにします。

重要なテキストを読むために水平方向にスクロールしたり、主要な画像を見るためにズームしたりする必要がないようにしましょう。

アプリ全体で一貫した外観を維持します。

一般的に、同じような機能を持つ要素は同じように見えるべきです。

重要性を伝えるために、視覚的な重みとバランスを使用します。

大きなアイテムは目を引き、小さなアイテムよりも重要であるように見えます。

また、大きなアイテムはタップしやすいので、キッチンやジムなど、気が散りやすい環境でアプリを使用する場合には特に重要です。

一般的には、主要な項目は画面の上半分、リーディングサイドに近い位置に配置します。

整理整頓は、スキャンを容易にし、組織や階層を伝えるために使用します。

整列させることで、アプリがすっきりと整理されたように見え、スクロール中の集中力を高めたり、情報を見つけやすくしたりすることができます。

また、インデントや配置によって、コンテンツのグループの関連性を示すこともできます。

可能であれば、縦向きと横向きの両方をサポートします。

人々はアプリをさまざまな向きで使いたいと思っているので、その期待に応えることができれば最高です。

文字サイズの変更に対応する。

ほとんどのアプリケーションは、「設定」で異なるテキストサイズを選択すると、それに対応することを期待しています。

文字サイズの変更に対応するには、レイアウトの調整が必要な場合があります。

https://gyazo.com/ca001ffd6b519f6addba6b88b646ae29

https://gyazo.com/ca001ffd6b519f6addba6b88b646ae29

インタラクティブな要素には十分なタッチターゲットを用意してください。

すべてのコントロールにおいて、タップ可能な最小面積は44x44ptを維持するようにしてください。

https://gyazo.com/be725b539f3f9bfe8e45fe4e02d5a4c9

https://gyazo.com/32a4072d59bcc39547d6a2f31d4b9d7b

複数のデバイスでアプリをプレビューする。

ワイドカラーイメージのような機能は、実際のデバイスでプレビューするのが一般的ですが、Xcodeに付属するSimulatorを使って、クリッピングなどのレイアウトの問題を確認することができます。

例えば、ランドスケープモードに対応したアプリであれば、Simulatorを使って、デバイスが左右に回転しても美しいレイアウトになっているかどうかを確認できます。

注意点

iPhone Xなどの一部のデバイスでは、アプリがサポートしているかどうかにかかわらず、上下反転したポートレートモードをサポートしていません。

大きなデバイスでテキストを表示するときには、読みやすさのための余白を適用します。

この余白により、テキストの行が十分に短くなり、快適な読み心地が得られます。

Adapting to Changes in Context

コンテキストが変化しても、現在のコンテンツに集中します。

コンテンツは最優先事項です。

環境が変化したときにフォーカスを変えると、混乱してイライラしたり、アプリをコントロールできなくなったように感じることがあります。

無駄なレイアウト変更は避けましょう。

デバイスを回転させても、レイアウト全体が変わる必要はありません。

たとえば、アプリが縦向きで画像のグリッドを表示している場合、横向きで同じ画像をリストとして表示する必要はありません。

代わりに、グリッドの寸法を調整するだけでよいのです。

すべてのコンテキストで同等のエクスペリエンスを維持するようにしてください。

アプリがランドスケープでのみ動作することが不可欠な場合は、両方のバリエーションをサポートします。

ランドスケープのみのアプリは、デバイスを左に回転させても右に回転させても、同じように動作するはずです。

アプリを使うときにデバイスを回転させるように指示してはいけません。

サポートされていない方向にデバイスを持ったときに、アプリが自動的に回転しないと、人は本能的にデバイスを回転させることを知ってしまいます。

回転に対するアプリの対応は、状況に応じてカスタマイズします。

例えば、デバイスを回転させてキャラクターを動かすゲームでは、ゲームプレイ中にデバイスの向きを変えるべきではありません。

しかし、メニューやイントロを現在の方向に合わせて表示することは可能です。

iPadとiPhoneの両方に対応することを目指します。

どちらのタイプのiOSデバイスでもアプリを実行できる柔軟性があると、ユーザーに喜ばれます。

アプリの特定の機能（電話など）がiPhone専用のハードウェアを必要とする場合は、iPadではその機能を隠すか無効にして、アプリの他の機能を使ってもらうようにしましょう。

https://gyazo.com/de61d499d09cd4dcb7df2e5dfd2b33bb

https://gyazo.com/c5da7ccd4987cf7462409636fcd61cd3

https://gyazo.com/e01d5a9db394e62dd67d3b3b2d0a60fd

https://gyazo.com/393c496cfdadb7a1f75a0cd6ec7584a4

https://gyazo.com/945f4ef26e6d45f2c282d78bcba568b1

https://gyazo.com/4c0c43d540d6a771640b7c379c4a1566

既存のアートワークを再利用する際は、アスペクト比の違いに注意してください。

画面サイズによってアスペクト比が異なるため、アートワークが切り取られたり、レターボックス化したり、ピラーボックス化したりすることがあります。

重要なビジュアルコンテンツは、すべてのディスプレイサイズで表示されるようにしてください。

Designing a Full-Screen Experience

画面いっぱいにビジュアル要素を配置する。

背景はディスプレイの端まで表示され、テーブルやコレクションなどの縦方向にスクロール可能なレイアウトは下部まで表示されるようにします。

インタラクティブなコントロールを、画面の一番下や隅に明示的に配置することは避けてください。

人々は、ホーム画面やアプリケーションスイッチャーなどの機能にアクセスするために、ディスプレイの下端でスワイプジェスチャーを使用します。

これらのジェスチャーは、この領域に実装したカスタムジェスチャーをキャンセルする可能性があります。

画面の隅は、人が快適に手を伸ばすのが難しい場所でもあります。

https://gyazo.com/9d0de7eeb7e1d1070c56ff4a2c71573e

クリッピングを防ぐために、必要なコンテンツを挿入します。

一般的に、コンテンツは中央に配置し、左右対称に挿入することで、どの方向から見ても美しく、角が丸くなって切り取られたり、センサーハウジングに隠れたり、ホーム画面にアクセスするためのインジケータが見えなくなったりしないようにします。

デバイスが横向きの場合、ゲームなどの一部のアプリケーションでは、コンテンツのためのスペースを確保するために、タップ可能なコントロールを画面の下側（セーフエリアの下側）に配置することが適切な場合があります。

画面の上部と下部にコントロールを配置する場合は、一致したインセットを使用し、コントロールを操作しようとしたときに誤ってホームインジケータを狙ってしまうことがないように、ホームインジケータの周囲に十分なスペースを確保してください。

ホームインジケーターは画面の中央に配置されるため、アプリケーションのインターフェースとの位置関係が変わることがあります。

https://gyazo.com/0b242d33d20bacc198a32d70bc811fdb

https://gyazo.com/b87fd9c2576e359b91d610852e1d873d

インセットの全角ボタン。

画面の端まではみ出しているボタンは、ボタンに見えない場合があります。

全角ボタンの側面には、システムで定められた標準的な余白を確保してください。

画面の下部に表示される全角ボタンは、角を丸くしてセーフエリアの下部に合わせた方が見栄えが良くなります。

また、ホームインジケーターと衝突しないようにします。

ディスプレイの主要な機能を隠したり、特別な注意を払ったりしないでください。

角が丸いデバイス、センサーハウジング、ホーム画面にアクセスするためのインジケータを、画面の上下に黒いバーを置いて隠そうとしないでください。

また、ブラケット、ベゼル、図形、説明文などの視覚的な装飾を用いて、これらの部分に特別な注意を払うようなこともしないでください。

ステータスバーの高さに注意してください。

iPhoneのフルスクリーンモデルでは、ステータスバーの高さが他のモデルに比べて高くなっています。

ステータスバーの下にコンテンツを配置する際に、ステータスバーの高さが固定されていると想定している場合は、現在のデバイスに応じてコンテンツを動的に配置するようにアプリをアップデートする必要があります。

なお、フルスクリーンのiPhoneでは、音声録音や位置情報の追跡などのバックグラウンドタスクがアクティブになっていても、ステータスバーの高さは変わりません。

現在ステータスバーを非表示にしている場合は、フルスクリーンのiPhone上でアプリケーションを実行する際にその判断を再検討してください。

フルスクリーンのiPhoneモデルは、他のモデルよりもコンテンツのための垂直方向のスペースが広く、ステータスバーは、アプリケーションが十分に活用できないであろう画面の領域を占めています。

また、ステータスバーには、人々が有用と考える情報も表示されます。

ステータスバーを隠すのは、付加価値と引き換えにすべきです。

ホーム画面にアクセスするためのインジケータの自動非表示は最小限にとどめてください。

自動非表示を有効にすると、ユーザーが数秒間画面に触れていない場合、インジケータが消えます。再び画面に触れると再び表示されます。

この動作は、ビデオや写真のスライドショーのような受動的な表示の場合にのみ有効にしてください。

Additional Layout Considerations

エッジツーエッジのディスプレイでウェブサイトが美しく見えるようにします。